<template>
	<!-- 普通支付订单 -->
    <div class="member-list">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "分销"},{"name": "人员管理", "url": "/memberlist"}]'></tz-breadcrumb>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="80px" >
          <el-row :gutter="0">
            <el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="21">
              <!-- 代理商名称 -->
              <el-form-item>
                <el-input v-model="formInline.realname" placeholder="名称"></el-input>
              </el-form-item>
							 <!-- 代理商电话 -->
              <el-form-item>
                <el-input v-model="formInline.phone" placeholder="电话"></el-input>
              </el-form-item>
            </el-col>
            <!-- 搜索 -->
            <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
              <el-row :gutter="0">
                <el-form-item>
                  <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24"><el-button type="primary" size="small" style="width: 100%;margin-top: 20px;"  @click="onSubmit">搜索</el-button>
                  <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24"><el-button plain size="small" style="width: 100%;">导出数据</el-button></el-col>

                  </el-col>
                </el-form-item>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <!-- 搜索结果 -->
        <el-table :data="tableData" :highlight-current-row='true'>
          <!-- 编码 -->
          <el-table-column label="用户ID">
            <template slot-scope="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <!-- 商家名称 -->
          <el-table-column label="名称/电话">
            <template slot-scope="scope">
              <span style="color:#8cc5ff">{{ scope.row.role }}</span><br>{{ scope.row.realname }}<br>{{ scope.row.phone }}
            </template>
          </el-table-column>
          <!-- 编码 -->
          <el-table-column label="编码">
            <template slot-scope="scope">
              <span>{{ scope.row.identification_code}}</span>
            </template>
          </el-table-column>
          <!-- 会员类型 -->
          <el-table-column label="等级">
            <template slot-scope="scope">
              <span>{{ scope.row.level ? scope.row.level : '--' }}</span>
            </template>
          </el-table-column>
          <!-- 推广人 -->
          <el-table-column label="上线">
            <template slot-scope="scope">
              <span>{{ scope.row.tababa ? scope.row.tababa : '--' }}</span>
            </template>
          </el-table-column>
					          <!-- 分佣比率 -->
          <el-table-column label="分佣比率">
            <template slot-scope="scope">
              <span>{{ scope.row.bkge_ratio | ratip }}%</span>
            </template>
          </el-table-column>
          <!-- 注册时间 -->
          <el-table-column label="注册时间">
            <template slot-scope="scope">
              <span>{{ scope.row.created_at ? scope.row.created_at : '--' }}</span>
            </template>
          </el-table-column>
					<!-- 余额 -->
          <el-table-column label="余额">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.balance}}</el-tag>
            </template>
          </el-table-column>
          <!-- 商户设置操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain size="small" @click="detailsPages(scope.row.identification_code)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- <div class="block text-center" style="background: #fff;padding: 0;" v-if="total > pageSize">
          <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :total="total" :page-size='pageSize'>
          </el-pagination>
        </div> -->
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data: function () {
    return {
      formInline: {
        name: ''
      },
      tableData: []
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  filters: {
    ratip (val) {
      return (val * 100).toFixed(0);
    }
  },
  methods: {
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.getData();
    },
    getData () {
      let that = this;
      http.get(api.member, {
        token: localStorage.getItem('token'),
        pagesize: that.pageSize,
        page: that.page,
        phone: that.formInline.phone,
        realname: that.formInline.realname
      }, (res) => {
        console.log(res.data[0].result);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.tableData = res.data;
          that.total = res.data[0].total;
          return false;
        };
      }, (err) => {
        console.log(err);
      });
    },
    // 记录详情
    detailsPages (id) {
      this.$router.push({
        path: '/memberdetails',
        query: {
          identification_code: id
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    label
      font-size: 14px
      color: #333
      width: 70px
      display: inline-block
    .form-input, .form-select
      width: 200px
  .line
    height: 15px
.server-item
  width: 20px
  height: 20px
  margin: 5px
</style>
